<template>
  <van-loading v-if="loading" style="display:flex;align-items:center;justify-content:center;height:80vh" size="24px" vertical>加载中...
  </van-loading>
  <div v-else>
    <van-empty style="display:flex; justify-content:center; align-items:center; height: 70vh;" v-if="userList.length === 0"
               description="什么也没找到～"/>
    <div v-else>
      <van-card
          v-for="item in userList"
          :desc="item.intro"
          :title="item.userName"
          :thumb="item.avatarUrl"
          :tag="item.ifCaptain ? '队长' : null"
      >
        <template #tags>
          <van-tag style="margin: 10px 10px 10px 0" plain type="danger" v-for="tag in item.tags">{{ tag }}</van-tag>
        </template>
        <template #footer>
          <van-button plain type="primary" size="small" @click="onContact(item)">联系我</van-button>
        </template>
        <template #bottom>
          <p>{{ item.gender === 0 ? '男' : item.gender === 1 ? '女' : item.gender === 2 ? '保密' : null }}</p>
          <p v-if="item.joinTime">{{ `加入时间：${new Date(item.joinTime).toLocaleString()}` }}</p>
        </template>
      </van-card>
      <van-pagination v-if="total > 0"
                      v-model="pageNum"
                      @change="handlePageChange"
                      :page-count="Math.ceil(total / pageSize)"
                      mode="simple" />
    </div>
  </div>
</template>

<script setup lang="ts">
import {defineProps} from "@vue/runtime-core";
import {showConfirmDialog} from "vant";
import {ref} from "vue";

defineProps({
  userList: {
    type: Array,
    default: () => []
  },
  loading: {
    type: Boolean,
    default: false
  },
  pageSize: {
    type: Number,
    default: 10
  },
  total: {
    type: Number,
    default: 0
  }
});
const emit = defineEmits(['handlePageChange']);
const onContact = (item: any) => {
  showConfirmDialog({
    title: '联系方式',
    message: `手机号：${item.phone || '暂无'}\n邮箱：${item.email || '暂无'}\n微信号：${item.wxAccount || '暂无'}\nQQ号：${item.qqAccount || '暂无'}`,
    confirmButtonText: '我知道了',
    theme: 'round-button',
    showCancelButton: false
  });
}
const pageNum = ref(1);
const handlePageChange = (page: number) => {
  pageNum.value = page;
  emit('handlePageChange', page);
};
</script>
